<template>
    <div>
        <h2 style="text-align: center;">用户投资项目</h2>
        <table class="table-bordered">
            <tr>
                <td>项目名称</td>
                <td>
                    {{ info.I_Name }}
                </td>
            </tr>

            <tr>
                <td>投资总金额</td>
                <td>
                    {{ info.I_Budget }}
                </td>
            </tr>

            <tr>
                <td>已投金额</td>
                <td>
                    {{ info.I_Receive }}
                </td>
            </tr>

            <tr>
                <td>剩余金额</td>
                <td>
                    {{ info.I_Residue }}
                </td>
            </tr>

            <tr>
                <td>投资金额</td>
                <td>
                    <input type="text" v-model="UImoney" placeholder="请输入投资金额" @change="GetMoney">
                </td>
            </tr>

            <tr>
                <td>预期最高收益</td>
                <td>
                    {{ Newmoney.toFixed(2) }}CNY
                </td>
            </tr>

            <tr>
                <td colspan="2" style="text-align: center;">
                    <input type="button" value="确认投资" class="btn btn-success" @click="SaveData">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { useRoute,useRouter } from 'vue-router';
import {ref,onMounted} from 'vue';
import axios from 'axios';
import {useUserStore} from '../../store/index.ts'

//创建仓库实例
const userStore=useUserStore();

//创建响应式数据
const info=ref({
    I_Name:"",
    I_Budget:"",
    I_Receive:0,
    I_Residue:0
})

const UImoney=ref("")
const Newmoney=ref(0)


//创建路由信息对象实例
const route=useRoute();
//创建路由操作对象
const router=useRouter();

//创建生命周期函数钩
onMounted(()=>{
    GetInvestInfo()
})

//加载数据方法
const GetInvestInfo=()=>{
    axios.get("https://localhost:44321/api/Invest/GetInvestInfo",
        {
            params:{
                Iid:route.params.Iid
            }
        }
    )
    .then(res=>{
        console.log(res.data)
        info.value=res.data
    })
}

//计算预期最高收益
const GetMoney=()=>{
    //预期最高收益=用户理财金额*12%
    Newmoney.value=Number(UImoney.value)*0.12
}

//保存用户投资信息
const SaveData=()=>{
    axios.post("https://localhost:44321/api/Invest/AddUserInvest",
        {
            U_Id:userStore.Uid,
            I_Id:route.params.Iid,
            UI_Money:UImoney.value
        }
    )
    .then(res=>{
        if(res.data>0)
        {
            alert('用户投资成功');
            router.push("/ShowUserInvestInfo")
        }
        else
        {
            alert('用户投资失败!!!')
        }
    })
}
</script>